Architecture du site
Remarque : Votre passion
Nous vous demandons de réaliser un site décrivant une de vos passion.
Mise en forme demandée
En général les sites web possèdent une zone d'entête (<header>), une zone de pied de page (<footer>) une zone de navigation entre les pages du site (<nav>) et des zones différentes en fonction de leur thématique (<section>).
Site "one page"
Pour notre application nous ferons une présentation de type "one page" dont la forme finale ressemblerai à l'image ci-dessous.
Il vous appartient donc de mettre un site "one page" en place portant sur une de vos passions qui respecte l'ensemble des contraintes données ci-dessous particulièrement à propos des liens et du classement proposé.
Ici notre site comprend trois liens renvoyant ici aux pages News Classement et Recherche. A vous de les renommer comme cela vous convient.
Ces trois pages comportent au minimum un titre d'onglet du même nom que les pages.
Ces trois pages seront faites avec chacune un fichier html portant le même nom.
Elles comportent un paragraphe dans la partie adaptée du fichier html
Voici le début du code qu'il vous appartient d'enrichir pour que votre site ressemble à celui proposé ci-dessus.
Attention il faut le compléter car il manque une balise paire <h> et des balises paires <p>
De plus les retours à la ligne pour certaines balises paires <li> sont à améliorer.
Le code ci-dessous est le code du fichier index.html de votre site "one page"
<body>
<header>
Titre
<p> <img src="images/banner.jpg" alt="banner"/> </p>
</header>
<nav>
<a href="news.html">News </a>
<a href="classement.html">Classement </a>
<a href="recherche.html">Recherche </a>
</nav>
<section>
<ul> <li> <a href="articles/article_20_01_1.html" >
<h2> L'artiste 1 est de retour </h2> </a>
<p>L'artiste bien connu est enfin de retour après des années d'absence. <br/>
Il a décidé de créer un nouvel album.</p>
</li>
<li> <a href="articles/article_20_01_2.html" >
<h2> L'artiste 2 est de retour </h2> </a>
L'artiste bien connu est enfin de retour après des années d'absence. <br/>
Il a décidé de créer un nouvel album.
</li>
<li> <a href="articles/article_20_01_3.html" >
<h2> L'artiste 3 est de retour </h2> </a>
L'artiste bien connu est enfin de retour après des années d'absence. <br/>
Il a décidé de créer un nouvel album. </li>
<li> <a href="articles/article_20_01_4.html" >
<h2> L'artiste 4 est de retour </h2> </a>
L'artiste bien connu est enfin de retour après des années d'absence. <br/>
Il a décidé de créer un nouvel album. </li>
</ul>
</section>
<footer>
<a href="mailto:monemail@test.fr" >Contactez-moi </a> <!--Contact, Crédit-->
</footer>
</body>
Rappel : Chaque fichier html comprends au minimum ce code
<html>
<head>
<meta charset="utf-8" />
<title>Titre</title>
</head>
<body>
</body>
</html>
Ordonnancement du site
Le classement de vos pages se fera obligatoirement sous la forme :
Attention :
Vous déposerez votre dossier classeNom1Nom2 compressé dans moodle